<template>
    <div class="sideMenu">
        <div class="parentList" 
            v-for="(item,index) in list"
            :key="index"
        >
            <div class="parentTitle"  @click="openClose(index)">
                <span :class="{'color1':index===0,'color2':index===1,'color3':index===2,'color4':index===3}">{{item.label}}</span>
                <span :class="{'color1':index===0,'color2':index===1,'color3':index===2,'color4':index===3}">{{item.value}}</span>
            </div>
            <div class="child" v-show="item.isOpen"> 
                <div class="childList" 
                    v-for="(item1,index1) of item.child"
                    :key="index1"
                >
                    {{item1.label}}
                    {{item1.value}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  inject,
  reactive,
  toRefs
} from 'vue'
import { useRouter } from 'vue-router'
//输出的必须是proxy才对
export default {
    setup(){
        const { ctx } = getCurrentInstance();
        
        let list = reactive(
         [
                {
                    label:'自然灾害类',
                    value:'740',
                    isOpen:true,
                    child:[
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        }
                    ]
                },
                {   label:'安全生产类',
                    value:'346',
                    isOpen:false,
                    child:[
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        }
                    ]
                },
                {   label:'应急救援类',
                    value:'229',
                    isOpen:false,
                    child:[
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        }
                    ]
                },
                {   
                    label:'事件接报类',
                    value:'330',
                    isOpen:false,
                    child:[
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        },
                        {
                            label:'自然灾害类',
                            value:'740'
                        }
                    ]
                }
            ])
        let  currIndex = ref(false)
        list.forEach((item,index)=>{
            reactive(item)
        })
        function openClose(index){
            list[index].isOpen = !list[index].isOpen
            list.forEach((item,index1)=>{
                if(index1!==index){
                    item.isOpen= false
                }
            })
            console.log(list)
            
        }
        onMounted(()=>{
            
        })
        
        return {
           list,
           currIndex,
           openClose
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../assets/varibles.styl'
    .sideMenu
        position: absolute
        right:vw(462)
        top: vh(128)
        width:vw(162)
        cursor: pointer
        .parentList
            .parentTitle
                width:vw(132)
                height:vh(50)
                line-height:vh(50)
                border:1px solid #115178
                background: rgba(10,43,60,0.60)
                margin-top:vh(12)
                text-align:center
                .color1
                    color:rgba(8,199,241,1)
                .color2
                    color:rgba(254,175,38,1)
                .color3
                    color:rgba(189,86,255,1)
                .color4
                    color:rgba(13,222,121,1)
                span:nth-child(1)
                    font-size:vw(14)
                span:nth-child(2)
                    font-size:vw(22)
            
            .active
                background: url('/data/images/sjhj/reca.png') no-repeat
                background-size:100% 100%
                
            .child
                .childList
                    width:vw(132)
                    height:vh(41)
                    line-height:vh(41)
                    border:1px solid #ddd
                    margin-top:vh(5)
                    text-align:center
                    background: rgba(10,43,60,0.60)
                    border: 1px solid #115178
            
</style>